<template>
<div class="user">
		<div class="common-seach-wrap">
			<el-form size="small" :inline="true" :model="formInline" class="demo-form-inline">
				<el-form-item :label="$t('plus.review_status')">
					<el-select v-model="formInline.apply_status" :placeholder="$t('plus.select_status')">
						<el-option :label="$t('plus.all')" value="-1"></el-option>
						<el-option :label="$t('plus.pending_review')" value="10"></el-option>
						<el-option :label="$t('plus.review_approved')" value="20"></el-option>
						<el-option :label="$t('plus.paid')" value="40"></el-option>
						<el-option :label="$t('plus.rejected')" value="30"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item :label="$t('plus.withdrawal_method')">
					<el-select v-model="formInline.pay_type" :placeholder="$t('plus.select_withdrawal_method')">
						<el-option :label="$t('plus.all')" value="-1"></el-option>
						<el-option :label="$t('plus.wechat')" value="10"></el-option>
						<el-option :label="$t('plus.alipay')" value="20"></el-option>
						<el-option :label="$t('plus.bank_card')" value="30"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item :label="$t('plus.user_id_lower')"><el-input v-model="formInline.user_id"
						:placeholder="$t('plus.input_user_id')"></el-input></el-form-item>
				<el-form-item label=""><el-input v-model="formInline.search"
						:placeholder="$t('plus.input_user_info_short')"></el-input></el-form-item>
				<el-form-item><el-button type="primary" @click="onSubmit">{{$t('plus.search')}}</el-button></el-form-item>
				<el-form-item><el-button size="small" type="success" @click="onExport"
						v-auth="'/plus/agent/cash/export'">{{$t('plus.export')}}</el-button></el-form-item>
			</el-form>
		</div>

		<!--内容-->
		<div class="product-content">
			<div class="table-wrap">
				<el-table :data="tableData" border style="width: 100%" v-loading="loading">
					<el-table-column prop="userId" :label="$t('plus.user_id')" width="60"></el-table-column>
					<el-table-column prop="nickName" :label="$t('plus.wechat_avatar')" width="70">
						<template #default="scope">
							<img class="radius" v-img-url="scope.row.avatarUrl" width="30" height="30" />
						</template>
					</el-table-column>
					<el-table-column prop="nickName" :label="$t('plus.wechat_nickname')" width="100"></el-table-column>
					<el-table-column prop="realName" :label="$t('plus.real_name')"></el-table-column>
					<el-table-column prop="mobile" :label="$t('plus.phone')">
						<template #default="scope">
							<p class="text-ellipsis" :title="scope.row.mobile">
								{{ scope.row.mobile }}
							</p>
						</template>
					</el-table-column>
					<el-table-column prop="money" :label="$t('plus.withdraw_amount')">
						<template #default="scope">
							<span class="orange">{{ scope.row.money }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="payTypeText" :label="$t('plus.withdrawal_method')"></el-table-column>
					<el-table-column prop="payType" :label="$t('plus.withdrawal_info')">
						<template #default="scope">
							<div v-if="scope.row.payType == 10">
								<p>
									<span>{{$t('plus.name0',{place1:scope.row.realName})}}</span>
								</p>
							</div>
							<div v-else-if="scope.row.payType == 20">
								<p>
									<span>{{ scope.row.alipayName }}</span>
								</p>
								<p>
									<span>{{ scope.row.alipayAccount }}</span>
								</p>
							</div>
							<div v-else-if="scope.row.payType == 30">
								<p>
									<span>{{ scope.row.bankName }}</span>
								</p>
								<p>
									<span>{{ scope.row.bankAccount }}</span>
								</p>
								<p>
									<span>{{ scope.row.bankCard }}</span>
								</p>
							</div>
							<div v-else>
								<p><span>--</span></p>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="applyStatusText" :label="$t('plus.process_status')"></el-table-column>
					<el-table-column prop="createTime" :label="$t('plus.application_time')" width="135"></el-table-column>
					<el-table-column prop="auditTime" :label="$t('plus.review_time')" width="135"></el-table-column>
					<el-table-column fixed="right" :label="$t('plus.action')" width="180">
						<template #default="scope">
							<div v-if="scope.row.applyStatus == 10">
								<el-button @click="editClick(scope.row)" type="text" size="small"
									v-auth="'/plus/agent/cash/submit'">{{$t('plus.review')}}</el-button>
							</div>
							<div v-if="scope.row.applyStatus == 20">
								<!--            payType 打款方式 (10微信 20支付宝 30银行卡)-->
								<template v-if="scope.row.applyStatus == 20 && scope.row.payType != 10">
									<el-button @click="makeMoney(scope.row)" type="text" size="small"
										v-auth="'/plus/agent/cash/money'">{{$t('plus.manual_transfer')}}</el-button>
								</template>
								<template v-if="scope.row.applyStatus == 20 && scope.row.payType == 10">
									<el-button @click="WxPay(scope.row.id)" type="text" size="small"
										v-auth="'/plus/agent/cash/money'">{{$t('plus.wechat_payment')}}</el-button>
								</template>
							</div>
							<div v-if="scope.row.applyStatus == 30">
								<el-button @click="editClick(scope.row)" type="text" size="small">{{$t('plus.details')}}</el-button>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>

			<!--分页-->
			<div class="pagination">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
					:current-page="curPage" :page-size="pageSize" layout="total, prev, pager, next, jumper"
					:total="totalDataNumber"></el-pagination>
			</div>
		</div>
		<Edit v-if="open_edit" :open_edit="open_edit" :form="userModel" @closeDialog="closeDialogFunc($event, 'edit')">
		</Edit>
	</div>
</template>

<script>
import PlusApi from "@/api/plus.js";
import qs from "qs";
import Edit from "./dialog/Edit.vue";
import { getCookie } from "@/utils/base.js";
import { useUserStore } from "@/store";
const {
  token
} = useUserStore();
export default {
  components: {
    /*编辑组件*/
    Edit
  },
  data() {
    return {
      token,
      /*是否加载完成*/
      loading: true,
      /*列表数据*/
      tableData: [],
      /*一页多少条*/
      pageSize: 15,
      /*一共多少条数据*/
      totalDataNumber: 0,
      /*当前是第几页*/
      curPage: 1,
      formInline: {
        search: "",
        /*用户ID*/
        user_id: ""
      },
      /*是否打开编辑弹窗*/
      open_edit: false,
      /*当前编辑的对象*/
      userModel: {}
    };
  },
  props: {},
  watch: {
    $route(to, from) {
      if (to.query.user_id != null) {
        this.formInline.user_id = to.query.user_id;
      } else {
        this.formInline.user_id = "";
      }
      this.curPage = 1;
      this.getData();
    }
  },
  created() {
    if (this.$route.query.user_id != null) {
      this.formInline.user_id = this.$route.query.user_id;
    }
    /*获取列表*/
    this.getData();
  },
  methods: {
    /*获取数据*/
    getData() {
      let self = this;
      let Params = {};
      Params.userId = self.formInline.user_id;
      Params.search = self.formInline.search;
      Params.applyStatus = self.formInline.apply_status;
      Params.payType = self.formInline.pay_type;
      Params.pageIndex = self.curPage;
      Params.pageSize = self.pageSize;
      PlusApi.cash(Params, true).then(res => {
        self.loading = false;
        self.tableData = res.data.records;
        self.totalDataNumber = res.data.total;
      }).catch(error => {});
    },
    /*搜索*/
    onSubmit() {
      this.curPage = 1;
      this.getData();
    },
    onExport: function () {
      let self = this;
      let Params = {};
      Params.userId = self.formInline.user_id;
      Params.search = self.formInline.search;
      Params.applyStatus = self.formInline.apply_status;
      Params.payType = self.formInline.pay_type;
      Params.pageIndex = self.curPage;
      Params.pageSize = self.pageSize;
      Params.tokenshop = self.token;
      let baseUrl = import.meta.env.VITE_BASIC_URL;
      if (!baseUrl) {
        baseUrl = window.location.protocol + "//" + window.location.host;
      }
      window.location.href = baseUrl + "/api/shop/plus/agent/cash/export?" + qs.stringify(Params);
    },
    /*每页多少条*/
    handleSizeChange(val) {
      this.curPage = 1;
      this.pageSize = val;
      this.getData();
    },
    /*选择第几页*/
    handleCurrentChange(val) {
      let self = this;
      self.curPage = val;
      self.getData();
    },
    /*打开弹出层编辑*/
    editClick(item) {
      this.userModel = item;
      this.open_edit = true;
    },
    /*关闭弹窗*/
    closeDialogFunc(e, f) {
      if (f == "add") {
        this.open_add = e.openDialog;
        if (e.type == "success") {
          this.getData();
        }
      }
      if (f == "edit") {
        this.open_edit = e.openDialog;
        if (e.type == "success") {
          this.getData();
        }
      }
    },
    /*确认打款*/
    makeMoney(e) {
      let self = this;
      ElMessageBox.confirm($t("plus.confirm_payout"), $t("plus.prompt"), {
        confirmButtonText: $t("plus.confirm_text"),
        cancelButtonText: $t("plus.cancel_text"),
        type: "warning"
      }).then(() => {
        self.loading = true;
        PlusApi.money({
          id: e.id
        }, true).then(data => {
          self.loading = false;
          if (data.code == 1) {
            ElMessage({
              message: $t("plus.operation_success"),
              type: "success"
            });
            this.getData();
          } else {
            self.loading = false;
          }
        }).catch(error => {
          self.loading = false;
        });
      }).catch(() => {});
    },
    /*微信打款*/
    WxPay(e) {
      let self = this;
      ElMessageBox.confirm($t("plus.wechat_enterprise_pay_tip"), $t("plus.prompt"), {
        confirmButtonText: $t("plus.confirm_text"),
        cancelButtonText: $t("plus.cancel_text"),
        type: "warning"
      }).then(() => {
        self.loading = true;
        PlusApi.WxPay({
          id: e
        }, true).then(data => {
          self.loading = false;
          if (data.code == 1) {
            ElMessage({
              message: $t("plus.operation_success"),
              type: "success"
            });
            this.getData();
          } else {
            self.loading = false;
          }
        }).catch(error => {
          self.loading = false;
        });
      }).catch(() => {});
    }
  }
};
</script>

